<!-- 题库编辑弹窗 -->
<template>
  <el-dialog width="750px" :visible="visible" :lock-scroll="false" :destroy-on-close="true" custom-class="ele-dialog-form"
    :title="isUpdate ? '导入题目' : '导入题目'" @update:visible="updateVisible">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="题目状态:" prop="status" label-width="100px">
          <el-radio-group v-model="form.status" size="mini">
            <!-- 状态：1 为 启用，2 停用 出库 3为 停用-->
            <el-radio-button :label="1">启用</el-radio-button>
            <el-radio-button :label="2">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属题库:" prop="topic_id">
            <el-select v-model="form.topic_id" clearable filterable placeholder="请选择所属题库" @change="selectPrescription()">
              <el-option v-for="item in topicOption" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="所属处方:" prop="prescription_id">
            <el-select v-model="form.prescription_id" clearable filterable placeholder="请选择所属处方" >
              <el-option v-for="item in prescriptOption" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="导入模板:" >
          <el-upload ref="uploadFile" v-loading="fileLoading" class="upload-demo" element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
            :auto-upload="false" :file-list="fileList" with-credentials action="#" :limit="1" drag
            :on-change="uploadChange" :http-request="submitProData" show-file-list @submit="submitProData">
            <i class="el-icon-upload" />
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div slot="tip" class="el-upload__tip" style="margin-left: 196px">仅支持上传xslx文件</div>
          </el-upload>
          <el-button type="text" icon="el-icon-download" @click="handleDownload">考试题目模版下载</el-button>
        </el-form-item>
      </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="submitProData">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadImage from '@/components/uploadImage'
export default {
  name: 'ExampImport',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: { uploadImage },
  data() {
    return {
      fileLoading: false, // 文件上传loading
      prescriptOption:[],
      fileList: [],
      topicOption:[],
      // 表单数据
      form: Object.assign({ status: 1, type: 1 }, this.data),
      // 表单验证规则
      rules: {
        topic_id: [
          { required: true, message: '请选择题库', trigger: 'blur' }
        ],
        file: [
          { required: true, message: '请上传模板文件', trigger: 'blur' }
        ],
        prescription_id: [
          { required: true, message: '请选择处方', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data, {
          // 清空密码
          password: "",
        });
        // 取值赋予城市组件
        this.city = this.data.city;
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
        // 清空省市区控件
        this.city = [];
      }
    }
  },
  mounted() {
  },
  // 页面创建时
  created() {
    this.topicList();
  },
  methods: {
    // 下载模版
    handleDownload() {
      window.location.href = '../excel/题目模板.xlsx'
    },
    // 上传到本地
    uploadChange(file, fileList) {
      this.form.file = file.raw
    },
     // 导入考试题目表格
     submitProData(file) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.file) {
            const fromdata = new FormData()
            fromdata.append('topic_id', this.form.topic_id)
            fromdata.append('prescription_id', this.form.prescription_id)
            fromdata.append('status', this.form.status)
            fromdata.append('file', this.form.file)
            this.$http.post('/examp/import_examp_problem', fromdata).then(res => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message({ type: 'success', message: res.data.msg });
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit('done');
              } else {
                this.$message.error(res.data.msg);
              }
            }).catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
          } else {
            this.$message.error('请上传模板文件');
            return false
          }
        } else {
          return false
        }
      })
      return
    },
     /* 获取题库列表 */
     topicList() {
      this.$http.get('/topic/getExamTopicSelectList').then(res => {
        if (res.data.code === 0) {
          this.topicOption=res.data.data;
        } 
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    // 筛选处方
    selectPrescription(){
      this.prescriptOption=[];
      this.$http.post('/prescription/getPrescriptionSelectList',{topic_id: this.form.topic_id,type:1}).then(res => {
        if (res.data.code === 0) {
          this.prescriptOption=res.data.data;
        } 
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          // 城市数据处理
          this.form = Object.assign({}, this.form, {
            city: this.city
          });
          this.$http.post('/train/edit', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message({ type: 'success', message: res.data.msg });
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
  }
}
</script>

<style scoped></style>
